<template>
  <div class="goodsissue">
    <a-card :bordered="false" style="border-radius:8px;margin-top:10px;">
      <div class="card_title">
        商品列表
      </div>
      <div class="groupbox flex row_bet flex_wrap">
        <div class="btns" style="margin-right: 5px;margin-bottom: 5px;">
          <a-radio-group class="br4" :value="type" @change="dobtns">
            <a-radio-button :value="1">
              出单汇总
            </a-radio-button>
            <a-radio-button :value="2">
              实时出单
            </a-radio-button>
          </a-radio-group>
        </div>
        <div class="flex row_bet flex_wrap">
          <a-range-picker
              :ranges="{
              本周: [moment().subtract(parseInt(moment().format('d')) - 1, 'days'), moment()],
              上周: [
                moment().subtract(parseInt(moment().format('d')) + 6, 'days'),
                moment().subtract(parseInt(moment().format('d')), 'days')
              ],
              本月: [
                moment()
                  .month(moment().month())
                  .startOf('month'),
                moment()
                  .month(moment().month())
                  .endOf('month')
              ],
              上月: [
                moment(
                  moment()
                    .subtract(1, 'month')
                    .format('YYYY-MM') + '-01'
                ),
                moment(
                  moment()
                    .subtract(1, 'month')
                    .format('YYYY-MM') + '-01'
                )
                  .subtract(-1, 'month')
                  .add(-1, 'days')
              ],
              半年: [
                moment()
                  .startOf('day')
                  .subtract(6, 'month'),
                moment()
              ]
            }"
              format="YYYY-MM-DD"
              @change="passChange"
              style="width:230px;margin-right: 5px;margin-bottom: 5px;"
          >
            <div
                class="flex row_around col_center"
                style="height:30px;border: 1px solid rgb(232, 233, 234);border-radius: 4px;">
              <span class="m_l_10">{{ pass }}</span>
              <a-icon type="calendar" style="float: right;"/>
            </div>
          </a-range-picker>
          <a-input
              v-model="eventId"
              class="br4"
              style="width:120px;margin-right: 5px;margin-bottom: 5px;"
              placeholder="活动ID"
              allowClear/>
          <a-input
              v-model="search"
              class="br4"
              style="width:200px;margin-right: 5px;margin-bottom: 5px;"
              placeholder="标题/商品ID/店铺名"
              allowClear/>

          <a-button
              type="primary"
              :disabled="btnloading"
              class="br4"
              style="margin-right: 5px;margin-bottom: 5px;"
              @click="dopasssearch">
            <a-icon v-if="btnloading" type="reload" :spin="btnloading"/>
            {{ btnloading===true?'搜索中...':'搜索' }}
          </a-button>
          <a-button class="br4" @click="exportToExcel">导出</a-button>
        </div>
      </div>
      <div class="activitytable">
        <a-table
            :columns="columns"
            :rowKey="activity => activity.itemId"
            :dataSource="activity"
            :loading="loading"
            @change="handleTableChange"
            :pagination="pagination"
        >
          <div slot="itemId" slot-scope="text, row">
            <div class="goodsinfo">
              <div class="line-1" style="width:289px">
                <a :href="'https://detail.tmall.com/item.htm?id='+row.itemId" target="_blank" rel="noopener noreferrer">
                  {{ row.title }}</a></div>
              <div>商品ID:{{ row.itemId }}</div>
            </div>
          </div>
          <div slot="startTime" slot-scope="text, row">
            <div>起:{{ row.startTime }}</div>
            <div>止:{{ row.endTime }}</div>
          </div>

          <div slot="serviceRate" slot-scope="text, row">
            <div>{{ row.serviceRate }}%</div>
          </div>
          <template slot="footer" style="padding-right: 0">
            <div class="flex row_bet">
              <span style="width: 350px">总计：</span>
              <span class="text_center" style="width: 183px"> <a-icon type="minus"/> </span>
              <span class="text_center" style="width: 181px"> <a-icon type="minus"/> </span>
              <span class="text_center" style="width: 120px"> <a-icon type="minus"/> </span>
              <span class="text_center" style="width: 160px"> <a-icon type="minus"/> </span>
              <span class="text_center" style="width: 102px"> <a-icon type="minus"/> </span>
              <span class="text_center" style="width: 103px"> <a-icon type="minus"/> </span>
              <span class="text_center" style="width: 86px">{{ info.order_num===null? 0 : info.order_num }}</span>
              <span
                  class="text_center"
                  style="width: 102px">{{ info.is_alipayFee===null? 0 : info.is_alipayFee }}</span>
              <span class="text_center" style="width: 129px">{{ info.is_goodsNum===null? 0 : info.is_goodsNum }}</span>
              <span
                  class="text_center"
                  style="width: 119px">{{ info.is_serviceFee===null? 0 : info.is_serviceFee }}</span>
            </div>
          </template>
        </a-table>
      </div>
    </a-card>
  </div>
</template>

<script>
  import moment from 'moment'
  import countTo from 'vue-count-to'
  import { getuserissuedata } from '@/api/goodsApi'
  import { exportExcel } from '@/assets/js/Export2Excel'

  export default {
    name: 'Goodsissue',
    components: {
      countTo
    },
    data () {
      return {
        moment,
        btnloading: false,
        startVal: 0,
        endVal: 0,
        info: {
          order_num: 0,
          is_alipayFee: 0,
          is_goodsNum: 0,
          is_serviceFee: 0
        },
        service: {
          all_num: 0, // 在线商品数
          on_line_num: 0, //  在线商品数
          last_num: 0, // 昨天到期商品数
          add_day_num: 0, // 明天到期商品数
          day_num: 0 // 七天到期商品数
        },
        type: 1,
        status: 1,
        search: '',
        columns: [
          {
            title: '商品信息',
            align: 'left',
            width: 302,
            dataIndex: 'itemId',
            scopedSlots: {
              customRender: 'itemId'
            }
          },
          {
            title: '订单时间',
            width: 183,
            align: 'center',
            dataIndex: 'is_addTime',
            scopedSlots: {
              customRender: 'is_addTime'
            }
          },
          {
            title: '店铺',
            width: 181,
            align: 'center',
            dataIndex: 'shopTitle',
            scopedSlots: {
              customRender: 'shopTitle'
            }
          },
          {
            title: '活动ID',
            width: 120,
            align: 'center',
            dataIndex: 'eventId',
            scopedSlots: {
              customRender: 'eventId'
            }
          },
          {
            title: '排期时间',
            align: 'center',
            width: 160,
            dataIndex: 'startTime',
            scopedSlots: {
              customRender: 'startTime'
            }
          },
          {
            title: '商品单价',
            align: 'center',
            width: 102,
            dataIndex: 'is_goodsPrice',
            scopedSlots: {
              customRender: 'is_goodsPrice'
            }
          },
          {
            title: '服务费率',
            align: 'center',
            width: 103,
            dataIndex: 'is_serviceRate',
            scopedSlots: {
              customRender: 'is_serviceRate'
            }
          },
          {
            title: '订单数',
            align: 'center',
            width: 86,
            dataIndex: 'order_num',
            scopedSlots: {
              customRender: 'order_num'
            }
          },
          {
            title: '支付金额',
            align: 'center',
            width: 102,
            dataIndex: 'is_alipayFee',
            scopedSlots: {
              customRender: 'is_alipayFee'
            }
          },
          {
            title: '下单数量',
            align: 'center',
            width: 129,
            dataIndex: 'is_goodsNum',
            scopedSlots: {
              customRender: 'is_goodsNum'
            }
          },
          {
            title: '预估服务费',
            align: 'center',
            width: 119,
            dataIndex: 'is_serviceFee',
            scopedSlots: {
              customRender: 'is_serviceFee'
            }
          }
        ],
        activity: [
          //   {
          //   title: '桌布布艺防水防油免洗北欧ins网红长方形餐桌布茶几pvc学生书桌垫', // 标题
          //   itemId: '607093302330', // 商品id
          //   is_addTime: '2020-11-13 00:00:00', // 订单时间
          //   shopTitle: '怡沁园旗舰店', // 店铺名称
          //   eventId: '386683456', // 活动id
          //   startTime: '2020-10-28', // 开始时间
          //   endTime: '2020-11-30', // 结束时间
          //   is_goodsPrice: '31.00', // 单价
          //   is_serviceRate: '8.00%', // 服务费率
          //   order_num: 37, // 订单数
          //   is_alipayFee: '755.77', // 支付金额
          //   is_goodsNum: '100160.00', // 下单数
          //   is_serviceFee: '60.43' // 预估服务费
          // }
        ],
        loading: false,
        passsearch: '',
        passstart: '',
        passend: '',
        pagination: {
          pageSize: 15,
          page: 1
        },
        pass:
          moment().startOf('month').format('YYYY-MM-DD') +
          ' 至 ' +
          moment().format('YYYY-MM-DD'),
        typename: '到期商品',
        eventId: ''
      }
    },
    watch: {},
    computed: {
      issue: function () {
        return this.$store.getters.issue
      }
    },
    created () {
      console.log(this.issue)
      if (!this.issue.endTime) {
        this.passstart = moment().startOf('month').unix()
        this.passend = moment().endOf('month').unix()
        this.getuserissuedata(1, 15, 1)
      } else {
        this.passstart = moment(this.issue.startTime).unix()
        this.passend = moment(this.issue.endTime).unix()
        this.pass = this.issue.startTime + ' 至 ' + this.issue.endTime
        this.eventId = this.issue.eventId
        this.search = this.issue.itemId
        this.getuserissuedata(1, 15, 1, this.eventId, this.search)
      }
    },
    destroyed () {
      this.$store.dispatch('setIssuename', '')
    },
    mounted () {
    },
    methods: {
      exportToExcel () {
        require.ensure([], () => {
          const tHeader = ['商品名称', '店铺名称', '开始时间', '结束时间', '单价', '服务费率', '订单数', '支付金额',
            '下单数', '服务费', ' 预估服务费']// Excel的表格第一行的标题
          const filterVal = ['title', 'shopTitle', 'startTime', 'endTime', 'is_goodsPrice', 'is_serviceRate',
            'order_num', 'is_alipayFee', 'is_goodsNum', 'is_serviceFee'
          ]
          const list = this.activity
          const excelName = '商品出单数据'// 报表名称
          const data = this.formatJson(filterVal, list)
          exportExcel(tHeader, data, excelName)
        })
      },
      formatJson (filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      dobtns (val) {
        console.log(val)
        this.type = val.target.value
        this.getuserissuedata(1, 15, this.type, this.eventId, this.search)
      },
      dopasssearch () {
        //   console.log(this.search)
        this.btnloading = true
        this.getuserissuedata(1, 15, this.type, this.eventId, this.search)
      },
      // 商品列表
      getuserissuedata (page, pagesize, type, eventId, search) {
        this.loading = true
        getuserissuedata({
          page: page,
          pagesize: pagesize,
          type: type, // 1汇总 2实时
          is_eventId: eventId,
          search: search,
          start: this.passstart,
          end: this.passend
          // sort: 2,//可选升降序：1通过时间，2有效订单数，3开始时间，4结束时间，5预估服务费
          // desc: 2//1降序 2升序
        })
          .then(res => {
            console.log(res)
            this.activity = res.data.data.data
            this.info = res.data.info
            const pagination = {
              ...this.pagination
            }
            pagination.total = res.data.data.count
            this.pagination = pagination
            this.btnloading = false
            this.loading = false
          })
          .catch(err => {
            console.log(err)
          })
      },
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.getuserissuedata(params.page, 15, this.type, this.eventId, this.search)
      },
      passChange (dates, dateStrings) {
        // console.log('From: ', dates[0], ', to: ', dates[1])
        console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
        this.passstart = dates[0].unix()
        this.passend = dates[1].unix()
        console.log(this.passstart, this.passend)
        this.getuserissuedata(1, 15, this.type, this.eventId, this.search)
        const str = moment(dateStrings[0]).format('YYYY-MM-DD') + ' 至 ' + moment(dateStrings[1]).format('YYYY-MM-DD')
        this.pass = str
      }
    }
  }
</script>

<style lang="less" scoped>
  .goodsissue {
    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 14px;
      margin-bottom: 22px;
      font-weight: 600;
    }

    .header_box {
      height: 101px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header-info {
        .title {
          color: rgba(16, 16, 16, 0.7);
          font-size: 12px;
        }

        .datainfo {
          font-size: 28px;
          color: #101010;
          font-weight: 600;
        }
      }
    }

    .groupbox {
      margin-bottom: 16px;

      /deep/ .ant-radio-wrapper {
        color: #96989b;
        font-weight: 600;
      }

      /deep/ .ant-radio {
        display: none;
      }

      /deep/ .ant-radio-wrapper-checked {
        font-weight: 600;
        color: #101010;
      }

      /deep/ .ant-input {
        border-radius: 4px;
        height: 30px;
      }

      .btns {
        /deep/ .ant-btn {
          height: 30px;
        }
      }
    }

    .goodsinfo {
      .info-right {
        width: 300px;
        height: 100%;
        text-align: left;
      }
    }

    .activitytable {
      /deep/ .ant-table-footer {
        padding-right: 0 !important;
      }
    }
  }
</style>
